<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <div class="review_list" v-for="item in reviewData" :key="item.id">
      <div class="review_box">
        <div class="review_topBox">
          <img :src="coverUrl(item.cover)" class='header' v-if="item.cover">
          <img src='@/assets/resourceDetails/header.png' class="header" v-else>
          <span class="name">{{item.userName}}</span>
          <el-rate v-model="item.score" style="float:right" disabled></el-rate>
        </div>
        <div class="review_intro">{{item.content}}</div>
        <div class="review_bottom">
          <span>{{item.releaseTime}}</span>
          <div class="fav_content" @click="favListBtn(item.id,item.isAgree)" >
            <img src='@/assets/common/support_hover.png' class="fav_icon" v-if="item.isAgree == 1">
            <img src='@/assets/common/support.png' class="fav_icon" v-else>
            <span v-if="item.fabulousNum>0" style="margin-top:0.06rem;font-size:14px">{{item.fabulousNum}}</span>
          </div>
        </div>
      </div>
      <div class="review_reply" v-for="(info,index) in item.replyList" :key="index">
        <div class="review_box">
          <div class="review_topBox">
            <img :src="coverUrl(info.cover)" class='header' v-if="info.cover">
            <img src='@/assets/resourceDetails/header.png' class="header" v-else>
            <span class="name">{{info.userName}}</span>
            <span class="replyTip">回复</span>
            <span class="userName">{{item.userName}}</span>
          </div>
          <div class="review_intro">{{info.content}}</div>
          <div class="review_bottom">
            <span>{{info.releaseTime}}</span>
            <div class="fav_content" @click="favListBtn(info.id,info.isAgree)" >
              <img src='@/assets/common/support_hover.png' class="fav_icon" v-if="info.isAgree == 1">
              <img src='@/assets/common/support.png' class="fav_icon" v-else>
              <span v-if="info.fabulousNum>0">{{info.fabulousNum}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p v-if="loading" class="page-infinite-loading">
      <span>
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </span>
    </p>
    <!-- 查看更多评论 -->
    <div class="look_review" v-if="reviewTotal && reviewTotal>5" @click="reviewDetails">查看更多留言&gt;&gt;</div>
    <!-- 暂无评论 -->
    <div v-if="listNull" class="review_nullBox">
      <img src='@/assets/resourceDetails/review.png' class='review_nullIcon'>
      <div class="review_nullText">你将成为第一个发言人</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { agreeAPI } from "@/api/course";

export default {
  name:'review',
  props:{
    reviewData:{
      type:Array,
      default:[]
    },
    listNull: {
      type: Boolean,//类型
      value: ''//默认值
    },
    loading: {
      type: Boolean,//类型
      value: ''//默认值
    },
    reviewTotal: {
      type: Number,//类型
      value: 'default value'//默认值
    },
    name: {
      type: String,
      value:''
    },
    reviewType: {
      type: String,//类型
      value: 'default value'//默认值
    },
    postId: {
      type: String,//类型
      value: ''//默认值
    },
  },
  methods: {
    loadMore() {
      this.$emit('nextList');
    },
    favListBtn(id,isAgree){//点赞
      let that = this
      if (localStorage.getItem("y-token")) { //判断是否登录
        this.$emit('myList', {id,isAgree});
      } else{
        // Toast("登录后才能点赞哦~")
        // setTimeout(function() {
        //   that.$router.push({name:'login'})
        // },4000)
        this.$router.push({name:'login'})
      }
    },
    reviewDetails() {//查看全部评论
      this.$router.push({
        name:'comments',
        query:{
          resourceType:this.reviewData[0].resourceType,
          resourceId:this.reviewData[0].resourceId,
          resourceName:this.name
        }
      })
    },
  }
}
</script>


<style scoped>
.class_review{
  background: #fff;
  padding: 0.4rem 0.25rem;
  padding-bottom: 0;
  overflow: hidden;
}
.intro_title{
  color: #333333;
  font-size:17px;
  font-weight:bold;
}
.review_input{
  width: 100%;
  border:1px solid rgba(231,236,239,1);
  border-radius:33px;
  margin-top: 0.4rem;
  height: 0.66rem;
  line-height: 0.66rem;
  margin-bottom: 0.1rem;
}
.review_input_text{
  color: #C8CAD2;
  padding-left: 0.29rem;
}
.review_box {
  border-bottom: solid 1px #EEEEEE;
  padding: 0.3rem 0;
}
.review_reply .review_box {
  padding-left: 0.6rem;
}
.review_topBox{
  color: #333;
  overflow: hidden;
  font-size: 15px;
}
.header{
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  vertical-align: middle;
}
.replyTip {
  color: #FC9619;
  font-size: 15px;
  font-weight: bold;
}
.name{
  margin-left: 0.15rem;
  font-weight: bold;
}
.userName {
  font-weight: bold;
}
.start_box{
  float: right;
}
.start{
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.08rem;
}
.review_intro{
  color: #777777;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  margin-top: 0.12rem;
  font-weight:500;
  line-height:0.46rem;
  margin-left: 0.7rem;
  font-size: 14px;
}
.review_bottom{
  color: #BDC1CB;
  margin-top: 0.36rem;
  margin-left: 0.7rem;
  font-size: 12px;
}
.fav_content{
  float: right;
  display: flex;
  align-items: center;
}
.fav_icon{
  width:0.3rem;
  height:0.3rem;
  margin-right: 0.1rem;
  vertical-align: middle;
}
.look_review{
  color: #B2B1C3;
  margin: 0.4rem 0;
  text-align: center;
  font-size: 12px;
}
.review_nullBox{
  text-align: center;
  padding-bottom: 0.2rem;
}
.review_nullIcon{
  height: 2.52rem;
  width: 2.82rem;
  margin: 0.4rem 31%;
}
.review_nullText{
  color: #BDC2CB;
  font-weight: 500;
  margin-bottom: 0.4rem;
  font-size: 14px;
}
</style>

<style>
.mint-spinner-fading-circle{
  margin: 0 auto;
  margin-bottom: 10px;
}
.page-infinite-loading{
  text-align: center;
  padding: 10px;
  color: #999999;
  font-size: 14px;
}
.loadOver{
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  font-size: 14px;
}
</style>

